<template>
    <div class="app-container" style="padding: 5px;">
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span style="font-weight: bold;color: #0099ff;font-size: 16px;">客服回访工单统计</span>
            </div>
            <div ref="chart" style="width: 100%; height: 500px;"></div>
        </el-card>

        <el-card class="box-card" style="margin-top: 5px;">
            <div slot="header" class="clearfix">
                <span style="font-weight: bold;color: #0099ff;font-size: 16px;">客服回访工单明细</span>
            </div>
            <el-table v-loading="loading" :data="kfhfOrders" border stripe>
                <el-table-column label="日期" align="center" prop="wk_year" width="250">
                    <template slot-scope="scope">
                        <span v-if="scope.row.wk_year=='0'">Null</span>
                        <span v-if="scope.row.wk_year!='0'">{{ scope.row.wk_year }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="出货日期" align="center" prop="fh_date"/>
                <el-table-column label="销售人员" align="center" prop="slaeman"/>
                <el-table-column label="客户" align="center" prop="cus"/>
                <el-table-column label="商品名称" align="center" prop="big_name"/>
                <el-table-column label="所属周期" align="center" prop="zhouqi"/>
                <el-table-column label="备注" align="center" prop="remark"/>
                <el-table-column label="客户诉求" align="center" prop="cus_desc"/>
                <el-table-column label="处理结果" align="center" prop="is_process"/>
            </el-table>
            <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList"/>
        </el-card>
    </div>
</template>

<script>
import { listKfhfOrder,listKfhfOrdersInfo } from "@/api/system/dashboard/shdashboard";
import * as echarts from 'echarts';
export default {
  name: "Kfhfdash",
  data() {
    return {
      loading: true,
      total: 0,
      kfhfOrders: [],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        zhouqi: null,
      },
    }
  },
  created() {
    this.getList();
  },
  mounted(){
    this.initChart();
  },
  methods: {
    getList(){
      this.loading = true;
      listKfhfOrdersInfo(this.queryParams).then(response => {
        this.kfhfOrders = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    initChart(){
      listKfhfOrder(this.queryParams).then(res =>{
        const chart = echarts.init(this.$refs.chart);
        const that = this;
        const option = {
          title: {
            text: ''
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: ['二十四小时', '缓苗期', '幼苗期', '生长期', '上花期','总和']
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          toolbox: {
            feature: {
              saveAsImage: {}
            }
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: res.data.labels,
            axisLabel: {
              rotate: 90, // 设置 X 轴文字旋转角度
              interval: 0, // 强制显示所有标签
              fontSize: 12, // 文字大小
              color: '#333' // 文字颜色
            }
          },
          yAxis: {
            type: 'value'
          },
          // series: res.data.series
          series: res.data.series.map((s, i) => ({
            ...s,
            // 核心：未被选中的系列降低透明度
            lineStyle: { opacity: 1 },
            itemStyle: { opacity: 1 },
          }))
        };
        chart.setOption(option);
        chart.on('click', function(params) {
          if (params.componentType === 'series') {
            that.queryParams.zhouqi = params.seriesName;
            const optionn = {
              title: {
                text: ''
              },
              tooltip: {
                trigger: 'axis'
              },
              legend: {
                data: ['二十四小时', '缓苗期', '幼苗期', '生长期', '上花期','总和']
              },
              grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
              },
              toolbox: {
                feature: {
                  saveAsImage: {}
                }
              },
              xAxis: {
                type: 'category',
                boundaryGap: false,
                data: res.data.labels,
                axisLabel: {
                  rotate: 90, // 设置 X 轴文字旋转角度
                  interval: 0, // 强制显示所有标签
                  fontSize: 12, // 文字大小
                  color: '#333' // 文字颜色
                }
              },
              yAxis: {
                type: 'value'
              },
              // series: res.data.series
              series: res.data.series.map((s, i) => ({
                ...s,
                // 核心：未被选中的系列降低透明度
                itemStyle: { opacity:  params.seriesIndex === -1 || params.seriesIndex === i ? 1 : 0.1 },
                lineStyle: { opacity: params.seriesIndex === -1 || params.seriesIndex === i ? 1 : 0.1 },
              }))
            };
            chart.setOption(optionn);
            // 重新查数据
            that.getList();
          }
        });
        chart.getZr().on('click', function(event) {
          if (!event.target) {
            that.queryParams.zhouqi = null;
            const optionn = {
              title: {
                text: ''
              },
              tooltip: {
                trigger: 'axis'
              },
              legend: {
                data: ['二十四小时', '缓苗期', '幼苗期', '生长期', '上花期','总和']
              },
              grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
              },
              toolbox: {
                feature: {
                  saveAsImage: {}
                }
              },
              xAxis: {
                type: 'category',
                boundaryGap: false,
                data: res.data.labels,
                axisLabel: {
                  rotate: 90, // 设置 X 轴文字旋转角度
                  interval: 0, // 强制显示所有标签
                  fontSize: 12, // 文字大小
                  color: '#333' // 文字颜色
                }
              },
              yAxis: {
                type: 'value'
              },
              series: res.data.series.map((s, i) => ({
                ...s,
                // 核心：未被选中的系列降低透明度
                lineStyle: { opacity: 1 },
                itemStyle: { opacity: 1, },
              }))
            };
            chart.setOption(optionn);
            // 重新查数据
            that.getList();
          }
        });
      })
    },
  }
};
</script>
